define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {

    // 动态加载现代化图片管理CSS
    function loadModernImageManagerCSS() {
        if (!$('link[href*="modern-image-manager.css"]').length) {
            $('<link>')
                .attr('rel', 'stylesheet')
                .attr('type', 'text/css')
                .attr('href', '/assets/css/modern-image-manager.css')
                .appendTo('head');
        }
    }

    var Controller = {
        index: function () {
            // 动态引入通用脚本
            var script = document.createElement('script');
            script.src = '/assets/js/backend/common/index.js';
            document.head.appendChild(script);
            
            // 初始化表格参数配置
            Table.api.init({
                extend: {
                    index_url: 'communityinfo/communityinfo/index',
                    add_url: 'communityinfo/communityinfo/add',
                    edit_url: 'communityinfo/communityinfo/edit',
                    multi_url: 'communityinfo/communityinfo/multi',
                    del_url: 'communityinfo/communityinfo/del',
                    dragsort_url: 'ajax/weigh',
                    table: 'fa_slider',
                }
            });

            // 初始化表格
            var table = $("#table");

            // 初始化表格
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                escape: false,
                pk: 'id',
                sortName: 'weigh',
                sortOrder: 'asc',
                // 添加拖拽排序配置
                showDraggable: true,
                draggable: true,
                columns: [
                    [
                        { checkbox: true },
                        { field: 'id', title: __('Id'), sortable: true },
                        { field: 'ocation.name', title: '发布地址', sortable: true },
                        { field: 'title', title: '信息名称', sortable: true ,align:'left'},
                        { field: 'image', title: '封面图', formatter: Controller.api.formatter.image },
                        { field: 'create_time', title: '发布时间', formatter: Table.api.formatter.datetime, sortable: true },
                        { field: 'status', title: '状态', formatter: Controller.api.formatter.status, events: Controller.api.events.status },
                        {
                            field: 'operate',
                            title: __('Operate'),
                            table: table,
                            events: Table.api.events.operate,
                            formatter: Table.api.formatter.operate,
                            buttons: [
                                {
                                    name: 'edit',
                                    title: __('Edit'),
                                    icon: 'fa fa-pencil',
                                    classname: 'btn btn-xs btn-success btn-editone btn-dialog',
                                    url: 'communityinfo/communityinfo/edit',
                                    extend: 'data-area=["80%","80%"] data-title="编辑社区信息"'
                                },
                                {
                                    name: 'add',
                                    title: __('Add'),
                                    icon: 'fa fa-plus',
                                    classname: 'btn btn-xs btn-success btn-addone btn-dialog',
                                    url: 'communityinfo/communityinfo/add',
                                    extend: 'data-area=["80%","80%"] data-title="添加社区信息"'
                                }
                            ]
                        }
                    ]
                ]
            });
            
            // 绑定筛选按钮事件
            $('#btn-filter').on('click', function() {
                var ocatId = $('#c-ocation_id').val();
                
                var queryParams = table.bootstrapTable('getOptions').queryParams;
                table.bootstrapTable('refresh', {
                    query: {
                        ocat_id: ocatId
                    }
                });
            });
            
            // 绑定重置按钮事件
            $('#btn-reset-filter').on('click', function() {
                $('#c-ocation_id').val('').trigger('change');
                table.bootstrapTable('refresh', {
                    query: {}
                });
            });

            // 绑定表格事件，包括删除操作
            Table.api.bindevent(table);
            
            // 监听删除操作成功事件
            $(document).on('fa.event.refreshtable', function(e, table) {
                // 删除成功后刷新表格
                if (table && table.length > 0) {
                    table.bootstrapTable('refresh');
                }
            });
            
            Controller.api.bindevent();
        },
        
        add: function () {
            var script = document.createElement('script');
            script.src = '/assets/js/backend/common/add.js?';
            document.head.appendChild(script);
            
            // 加载现代化图片管理CSS
            loadModernImageManagerCSS();
            
            // 初始化图片组管理功能
            Controller.initImageGroups('add');
            
            // 初始化抓取网址功能
            Controller.initCollectContent();
            
            // 初始化文章选择器
            Controller.initArticleSelector();
            
            Controller.api.bindevent();
        },
        
        edit: function () {
            var script = document.createElement('script');
            script.src = '/assets/js/backend/common/add.js?';
            document.head.appendChild(script);
            
            // 加载现代化图片管理CSS
            loadModernImageManagerCSS();
            
            // 初始化图片组管理功能
            Controller.initImageGroups('edit');
            
            // 初始化抓取网址功能
            Controller.initCollectContent();
            
            // 初始化文章选择器
            Controller.initArticleSelector();
            
            Controller.api.bindevent();
        },
        
        // 打开文章选择器弹窗
        openArticleSelector: function(groupIndex) {
            var that = this;
            
            console.log('打开文章选择器，组索引:', groupIndex);
            console.log('Layer对象是否存在:', typeof Layer);
            console.log('layer对象是否存在:', typeof layer);
            
            // 检查Layer是否可用
            if (typeof Layer === 'undefined' && typeof layer === 'undefined') {
                console.error('Layer弹窗组件未加载');
                alert('弹窗组件未加载，请刷新页面重试');
                return;
            }
            
            // 使用可用的弹窗对象
            var layerObj = typeof Layer !== 'undefined' ? Layer : layer;
            
            // 创建弹窗内容
            var dialogContent = `
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">选择文章</h3>
                    </div>
                    <div class="panel-body">
                        <div id="article-toolbar" class="toolbar" style="margin-bottom: 15px;">
                            <div class="row">
                                <div class="col-md-3">
                                    <select id="article-city" class="form-control" data-live-search="true" title="选择城市">
                                        <option value="">全部城市</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <select id="article-school" class="form-control" data-live-search="true" title="选择学校">
                                        <option value="">全部学校</option>
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <button type="button" class="btn btn-info btn-article-filter" id="btn-article-filter">
                                        <i class="fa fa-search"></i> 筛选
                                    </button>
                                </div>
                            </div>
                        </div>
                        <table id="article-table" class="table table-striped table-bordered table-hover" width="100%">
                            <thead>
                                <tr>
                                    <th data-field="id" data-sortable="true">ID</th>
                                    <th data-field="title" data-sortable="true">标题</th>
                                    <th data-field="city_id" data-sortable="true">城市</th>
                                    <th data-field="school_id" data-sortable="true">学校</th>
                                    <th data-field="create_time" data-sortable="true">发布时间</th>
                                    <th data-field="status" data-sortable="true">状态</th>
                                    <th data-field="operate">操作</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            `;
            
            // 打开弹窗
            layerObj.open({
                type: 1,
                title: '选择文章',
                area: ['80%', '70%'],
                content: dialogContent,
                success: function(layero, index) {
                    console.log('弹窗打开成功');
                    // 初始化文章表格
                    that.initArticleTable(groupIndex);
                    
                    // 绑定筛选按钮事件
                    $('#btn-article-filter').off('click').on('click', function() {
                        that.refreshArticleTable();
                    });
                },
                error: function() {
                    console.error('弹窗打开失败');
                }
            });
        },
        
        // 初始化文章表格
        initArticleTable: function(groupIndex) {
            var that = this;
            
            // 初始化表格
            $('#article-table').bootstrapTable({
                url: '/article/article/index',
                method: 'get',
                pagination: true,
                sidePagination: 'server',
                pageSize: 10,
                pageList: [10, 25, 50],
                search: false,
                sortName: 'id',
                sortOrder: 'desc',
                queryParams: function(params) {
                    return {
                        page: params.offset / params.limit + 1,
                        limit: params.limit,
                        sort: params.sort,
                        order: params.order,
                        city_id: $('#article-city').val() || '',
                        school_id: $('#article-school').val() || '',
                        keyword: params.search || ''
                    };
                },
                responseHandler: function(res) {
                    console.log('API响应数据:', res);
                    // 确保返回正确的格式
                    if (res && typeof res === 'object') {
                        // 如果API返回的是{total: x, rows: []}格式，直接返回
                        if (res.hasOwnProperty('total') && res.hasOwnProperty('rows')) {
                            return res;
                        }
                        // 如果API返回的是{code: 200, data: {total: x, rows: []}}格式，提取data
                        if (res.code === 200 && res.data && res.data.hasOwnProperty('total') && res.data.hasOwnProperty('rows')) {
                            return res.data;
                        }
                        // 如果API直接返回数组，包装成bootstrap-table期望的格式
                        if (Array.isArray(res)) {
                            return {
                                total: res.length,
                                rows: res
                            };
                        }
                    }
                    // 默认返回空数据
                    return {
                        total: 0,
                        rows: []
                    };
                },
                columns: [
                    { field: 'id', title: 'ID', sortable: true },
                    { field: 'title', title: '标题', sortable: true, align: 'left' },
                    { field: 'city_id', title: '城市', sortable: true },
                    { field: 'school_id', title: '学校', sortable: true },
                    { field: 'create_time', title: '发布时间', formatter: Table.api.formatter.datetime, sortable: true },
                    { field: 'status', title: '状态', formatter: function(value) {
                        return value == 1 ? '<span class="text-success">正常</span>' : '<span class="text-gray">失效</span>';
                    }},
                    { 
                        field: 'operate', 
                        title: '操作', 
                        formatter: function(value, row, index) {
                            return '<button type="button" class="btn btn-xs btn-success btn-select-article" data-id="' + row.id + '" data-title="' + row.title + '" data-image="' + (row.image || '') + '">选择</button>';
                        },
                        events: {
                            'click .btn-select-article': function(e, value, row, index) {
                                that.selectArticle(row, groupIndex);
                                Layer.closeAll();
                            }
                        }
                    }
                ],
                onLoadSuccess: function(data) {
                    console.log('表格加载成功，数据:', data);
                },
                onLoadError: function(status) {
                    console.error('表格加载失败，状态:', status);
                    Layer.msg('加载文章列表失败，请稍后重试', {icon: 2});
                },
                onRefresh: function() {
                    console.log('表格刷新');
                }
            });
            
            // 加载城市和学校的下拉选项
            that.loadArticleFilters();
        },
        
        // 加载文章筛选器选项
        loadArticleFilters: function() {
            // 加载城市选项
            $.ajax({
                url: '/ysapi/v1/index/getCityList',
                type: 'get',
                success: function(res) {
                    if (res.code === 200 && res.data) {
                        var $citySelect = $('#article-city');
                        $citySelect.empty().append('<option value="">全部城市</option>');
                        $.each(res.data, function(index, item) {
                            $citySelect.append('<option value="' + item.id + '">' + item.name + '</option>');
                        });
                    }
                }
            });
            
            // 加载学校选项
            $.ajax({
                url: '/ysapi/v1/event/list?type=school',
                type: 'get',
                success: function(res) {
                    if (res.code === 200 && res.data && res.data.list) {
                        var $schoolSelect = $('#article-school');
                        $schoolSelect.empty().append('<option value="">全部学校</option>');
                        $.each(res.data.list, function(index, item) {
                            $schoolSelect.append('<option value="' + item.id + '">' + item.name + '</option>');
                        });
                    }
                }
            });
        },
        
        // 刷新文章表格
        refreshArticleTable: function() {
            // 使用refresh方法重新加载数据，queryParams会自动处理参数
            $('#article-table').bootstrapTable('refresh');
        },
        
        // 选择文章
        selectArticle: function(article, groupIndex) {
            // 获取当前图片组
            var $group = $('.slider-image-group[data-index="' + groupIndex + '"');
            
            if ($group.length) {
                // 填充标题
                $group.find('input[name*="[title]"').val(article.title);
                
                // 填充链接（使用文章详情页链接）
                var articleUrl = '/article/detail/id/' + article.id;
                $group.find('input[name*="[href]"').val(articleUrl);
                
                // 如果有头图，填充图片地址
                if (article.image) {
                    $group.find('input[name*="[src]"').val(article.image);
                    
                    // 创建图片预览
                    var $previewContainer = $group.find('[id^="p-images-"]');
                    if ($previewContainer.length) {
                        var previewHtml = `
                            <li class="col-xs-3">
                                <div class="img-box">
                                    <img src="${article.image}" class="img-responsive" style="max-height: 100px;">
                                    <div class="img-overlay">
                                        <a href="javascript:;" class="btn btn-danger btn-xs img-remove">
                                            <i class="fa fa-trash"></i>
                                        </a>
                                    </div>
                                </div>
                            </li>
                        `;
                        $previewContainer.html(previewHtml).show();
                        
                        // 绑定删除事件
                        $previewContainer.find('.img-remove').on('click', function() {
                            $group.find('input[name*="[src]"').val('');
                            $previewContainer.empty().hide();
                        });
                    }
                }
                
                // 显示成功提示
                Layer.msg('文章信息已填充到图片组' + groupIndex, {icon: 1, time: 2000});
            }
        },
        
        // 初始化文章选择器相关功能
        initArticleSelector: function() {
            // 文章选择器功能已通过openArticleSelector函数实现
            // 这里可以添加全局事件绑定或其他初始化代码
            console.log('文章选择器初始化完成');
        },
        
        // 初始化图片组管理功能
        initImageGroups: function (mode) {
            var imageCount = mode === 'add' ? 0 : 0;
            var maxImages = 5;
            var currentNumber = mode === 'edit' ? $("input[name='row[number]']").val() : '';

            // 图片组模板函数（用于编辑模式）
            function getImageGroupTemplate(index, data) {
                data = data || {};
                var hiddenIdField = mode === 'edit' ?
                    `<input type="hidden" name="images[${index}][id]" value="${currentNumber || ''}" />` : '';

                return `
                    <div class="slider-image-group modern-image-card" data-index="${index}">
                        <div class="image-card-container">
                            <!-- 卡片头部 -->
                            <div class="image-card-header">
                                <div class="card-title-section">
                                    <div class="card-icon">
                                        <i class="fa fa-image"></i>
                                    </div>
                                    <div class="card-title">
                                        <h5>图片 ${index}</h5>
                                        <span class="card-subtitle">轮播图片设置</span>
                                    </div>
                                </div>
                                <div class="card-actions">
                                    <button type="button" class="btn-card-action btn-drag" title="拖拽排序">
                                        <i class="fa fa-arrows"></i>
                                    </button>
                                    <button type="button" class="btn-card-action btn-preview" title="预览图片" data-index="${index}">
                                        <i class="fa fa-eye"></i>
                                    </button>
                                    <button type="button" class="btn-card-action btn-remove remove-image-group" title="删除图片">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </div>
                            </div>

                            <!-- 卡片主体 -->
                            <div class="image-card-body">
                                <!-- 图片预览区域 -->
                                <div class="image-preview-section">
                                    <div class="image-preview-container" id="preview-container-${index}">
                                        <div class="image-placeholder">
                                            <i class="fa fa-image"></i>
                                            <span>点击上传图片</span>
                                        </div>
                                    </div>
                                </div>

                                <!-- 表单区域 -->
                                <div class="image-form-section">
                                    <div class="form-row">
                                        <div class="form-col">
                                            <label class="form-label">图片标题</label>
                                            <input type="text" name="images[${index}][title]" class="form-input" 
                                                   placeholder="请输入图片标题" value="${data.title || ''}" />
                                            ${hiddenIdField}
                                        </div>
                                        <div class="form-col">
                                            <label class="form-label">图片链接</label>
                                            <input type="text" name="images[${index}][href]" class="form-input" 
                                                   placeholder="请输入图片链接" value="${data.href || ''}" />
                                        </div>
                                    </div>
                                    
                                    <div class="form-row">
                                        <div class="form-col-full">
                                            <label class="form-label">图片地址</label>
                                            <div class="image-upload-group">
                                                <input type="text" name="images[${index}][src]" class="form-input image-src-input" 
                                                       placeholder="请选择图片" value="${data.src || ''}" id="images-${index}-src" readonly />
                                                <div class="upload-actions">
                                                    <button type="button" class="btn-upload plupload" 
                                                            data-input-id="images-${index}-src" data-mimetype="image/*" 
                                                            data-width="750" data-height="422" data-multiple="false" 
                                                            data-preview-id="p-images-${index}" title="上传图片">
                                                        <i class="fa fa-upload"></i>
                                                        <span>上传</span>
                                                    </button>
                                                    <button type="button" class="btn-collect collect-btn" 
                                                            data-group-index="${index}" title="抓取图片">
                                                        <i class="fa fa-download"></i>
                                                        <span>抓取</span>
                                                    </button>
                                                    <button type="button" class="btn-article select-article-btn" 
                                                            data-group-index="${index}" title="选择文章">
                                                        <i class="fa fa-newspaper-o"></i>
                                                        <span>选择文章</span>
                                                    </button>
                                                </div>
                                            </div>
                                            <ul class="image-preview-list" id="p-images-${index}"></ul>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 卡片状态指示器 -->
                            <div class="card-status-indicator">
                                <div class="status-dot status-empty" id="status-${index}"></div>
                            </div>
                        </div>
                    </div>
                `;
            }

            // 更新图片计数显示
            function updateImageCount() {
                $('#image-count').text(imageCount);
                if (imageCount >= maxImages) {
                    $('#add-image-group').prop('disabled', true).addClass('disabled');
                } else {
                    $('#add-image-group').prop('disabled', false).removeClass('disabled');
                }
            }

            // 为已有图片创建预览
            function createImagePreview($group, imageSrc) {
                if (!imageSrc) return;
                
                var index = $group.data('index');
                var $previewContainer = $group.find('.image-preview-container');
                var $input = $group.find('input[name="images[' + index + '][src]"]');
                var $statusIndicator = $group.find('.status-dot');
                
                if ($previewContainer.length && imageSrc) {
                    // 更新预览容器
                    $previewContainer.addClass('has-image').html(`
                        <img src="${imageSrc}" alt="图片预览">
                        <div class="img-overlay">
                            <button type="button" class="img-remove" title="删除图片">
                                <i class="fa fa-trash"></i>
                            </button>
                        </div>
                    `);
                    
                    // 更新状态指示器
                    if ($statusIndicator.length) {
                        $statusIndicator.removeClass('status-empty status-processing')
                                       .addClass('status-filled');
                    }
                    
                    // 绑定删除事件
                    $previewContainer.find('.img-remove').on('click', function (e) {
                        e.preventDefault();
                        e.stopPropagation();
                        
                        // 清空输入框
                        $input.val('');
                        
                        // 恢复预览容器
                        $previewContainer.removeClass('has-image').html(`
                            <div class="image-placeholder">
                                <i class="fa fa-image"></i>
                                <span>点击上传图片</span>
                            </div>
                        `);
                        
                        // 更新状态指示器
                        if ($statusIndicator.length) {
                            $statusIndicator.removeClass('status-filled status-processing')
                                           .addClass('status-empty');
                        }
                        
                        // 重新绑定上传点击事件
                        bindPreviewContainerClick($group);
                    });
                    
                    // 绑定预览点击事件（放大查看）
                    $previewContainer.find('img').on('click', function (e) {
                        e.preventDefault();
                        e.stopPropagation();
                        showImageModal(imageSrc);
                    });
                }
            }
            
            // 绑定预览容器点击事件
            function bindPreviewContainerClick($group) {
                var $previewContainer = $group.find('.image-preview-container');
                var $uploadBtn = $group.find('.btn-upload');
                
                $previewContainer.off('click').on('click', function (e) {
                    if (!$(e.target).closest('.img-overlay').length) {
                        $uploadBtn.trigger('click');
                    }
                });
            }
            
            // 显示图片放大模态框
            function showImageModal(imageSrc) {
                var modalHtml = `
                    <div class="image-modal" id="imageModal">
                        <div class="image-modal-content">
                            <div class="image-modal-header">
                                <h4 class="image-modal-title">图片预览</h4>
                                <button type="button" class="image-modal-close" id="closeImageModal">
                                    <i class="fa fa-times"></i>
                                </button>
                            </div>
                            <div class="image-modal-body">
                                <img src="${imageSrc}" class="image-modal-img" alt="图片预览">
                            </div>
                        </div>
                    </div>
                `;
                
                // 移除已存在的模态框
                $('#imageModal').remove();
                
                // 添加新模态框到body
                $('body').append(modalHtml);
                
                var $modal = $('#imageModal');
                
                // 显示模态框
                setTimeout(function() {
                    $modal.addClass('show');
                }, 10);
                
                // 绑定关闭事件
                function closeModal() {
                    $modal.removeClass('show');
                    setTimeout(function() {
                        $modal.remove();
                    }, 300);
                }
                
                // 点击关闭按钮
                $modal.find('#closeImageModal').on('click', closeModal);
                
                // 点击背景关闭
                $modal.on('click', function(e) {
                    if (e.target === this) {
                        closeModal();
                    }
                });
                
                // ESC键关闭
                $(document).on('keyup.imageModal', function(e) {
                    if (e.keyCode === 27) {
                        closeModal();
                        $(document).off('keyup.imageModal');
                    }
                });
            }

            // 添加图片组（编辑模式）
            function addImageGroup(data) {
                if (imageCount < maxImages) {
                    imageCount++;
                    var $newGroup = $(getImageGroupTemplate(imageCount, data));
                    $('#slider-images-container').append($newGroup);

                    // 立即初始化上传组件
                    initUploadForGroup($newGroup);

                    // 绑定抓取按钮事件
                    $newGroup.find('.collect-btn').off('click').on('click', Controller.handleCollect);
                    
                    // 绑定选择文章按钮事件
                    $newGroup.find('.select-article-btn').off('click').on('click', function() {
                        console.log('选择文章按钮被点击');
                        var groupIndex = $(this).data('group-index');
                        console.log('组索引:', groupIndex);
                        Controller.openArticleSelector(groupIndex);
                    });

                    // 绑定预览容器点击事件
                    bindPreviewContainerClick($newGroup);
                    
                    // 绑定卡片删除按钮事件
                    $newGroup.find('.btn-remove').off('click').on('click', function(e) {
                        e.preventDefault();
                        removeImageGroup($newGroup);
                    });
                    
                    // 如果有已有图片数据，创建预览
                    if (data && data.src) {
                        createImagePreview($newGroup, data.src);
                    } else {
                        // 设置初始状态指示器
                        var $statusIndicator = $newGroup.find('.status-dot');
                        if ($statusIndicator.length) {
                            $statusIndicator.addClass('status-empty');
                        }
                    }

                    updateImageCount();
                    
                    // 触发卡片添加事件，用于重新绑定拖拽事件
                    $(document).trigger('card-added');
                    
                    return $newGroup;
                }
                return null;
            }
            
            // 删除图片组
            function removeImageGroup($group) {
                // 添加删除动画
                $group.addClass('removing');
                
                // 延迟删除以显示动画效果
                setTimeout(function() {
                    $group.remove();
                    imageCount--;
                    updateImageCount();
                    
                    // 重新排序剩余的图片组
                    $('#slider-images-container .modern-image-card').each(function(index) {
                        var newIndex = index + 1;
                        $(this).attr('data-index', newIndex);
                        $(this).find('.card-subtitle').text('图片组 #' + newIndex);
                        
                        // 更新所有相关的索引
                        $(this).find('input, select, textarea').each(function() {
                            var name = $(this).attr('name');
                            if (name) {
                                var newName = name.replace(/\[\d+\]/, '[' + (newIndex - 1) + ']');
                                $(this).attr('name', newName);
                            }
                        });
                    });
                }, 300);
            }

            // 为指定组初始化上传组件
            function initUploadForGroup($group) {
                // 尝试多次检查Fast是否加载
                var attempts = 0;
                var maxAttempts = 10;

                function tryInitUpload() {
                    attempts++;

                    $group.find('.plupload').each(function () {
                        var $btn = $(this);
                        console.log('正在初始化上传按钮 (尝试 ' + attempts + '):', $btn.data('input-id'));

                        if (typeof Fast !== 'undefined' && Fast.api && Fast.api.upload) {
                            try {
                                Fast.api.upload.init($btn);
                            } catch (e) {
                                // 如果Fast初始化失败，使用备用方案
                                initFallbackUpload($btn);
                            }
                        } else if (attempts >= maxAttempts) {
                            initFallbackUpload($btn);
                        } else {
                            // 继续等待Fast加载
                            setTimeout(tryInitUpload, 200);
                            return;
                        }
                    });
                }

                // 备用上传方案
                function initFallbackUpload($btn) {
                    $btn.off('click').on('click', function () {
                        var inputId = $(this).data('input-id');
                        var $input = $('#' + inputId);
                        var $previewContainer = $('#' + $btn.data('preview-id'));

                        // 创建文件选择器
                        var fileInput = document.createElement('input');
                        fileInput.type = 'file';
                        fileInput.accept = 'image/*';
                        fileInput.onchange = function (e) {
                            var file = e.target.files[0];
                            if (file) {
                                // 显示上传中状态
                                $btn.prop('disabled', true);
                                var originalHtml = $btn.html();
                                $btn.html('<i class="fa fa-spinner fa-spin"></i> 上传中...');

                                // 立即上传文件
                                uploadFileToServer(file, function (success, result) {
                                    // 恢复按钮状态
                                    $btn.prop('disabled', false);
                                    $btn.html(originalHtml);

                                    if (success && result.url) {
                                        // 上传成功，将服务器返回的URL填入输入框
                                        $input.val(result.url);
                                        // 创建预览
                                        createImagePreview($group, result.url);
                                    } else {
                                        layer.msg('上传失败：' + (result.msg || '未知错误'), { icon: 2 });
                                    }
                                });
                            }
                        };
                        fileInput.click();
                    });
                }

                // 上传文件到服务器
                function uploadFileToServer(file, callback) {
                    var formData = new FormData();
                    formData.append('file', file);

                    // 从页面输入框获取图片裁剪参数
                    var imageWidth = '750';   // 默认宽度750
                    var imageHeight = '422'; // 默认高度422

                    formData.append('image_width', imageWidth);
                    formData.append('image_height', imageHeight);
                    // 尝试获取上传URL，可能需要根据实际项目配置调整
                    var uploadUrl = '/admin/ajax/upload'; // 默认上传地址
                    // 如果有全局配置，使用全局配置的上传地址
                    if (typeof Config !== 'undefined' && Config.upload && Config.upload.uploadurl) {
                        uploadUrl = Config.upload.uploadurl;
                    } else if (typeof Fast !== 'undefined' && Fast.config && Fast.config.upload_url) {
                        uploadUrl = Fast.config.upload_url;
                    }

                    $.ajax({
                        url: uploadUrl,
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        dataType: 'json',
                        success: function (response) {
                            if (response.code === 1 || response.code === 200) {
                                // 上传成功，根据实际API响应格式提取URL
                                var fileUrl = '';

                                if (response.data && typeof response.data === 'object') {
                                    // 优先使用url（相对路径），其次使用fullurl
                                    fileUrl = response.data.url || response.data.fullurl;
                                } else if (response.data && typeof response.data === 'string') {
                                    // 如果data是字符串，直接使用
                                    fileUrl = response.data;
                                } else if (response.url) {
                                    // 备用：使用response.url
                                    fileUrl = response.url;
                                } else if (response.file_url) {
                                    // 备用：使用response.file_url
                                    fileUrl = response.file_url;
                                }
                                if (fileUrl) {
                                    callback(true, { url: fileUrl, message: response.msg || '上传成功' });
                                } else {
                                    callback(false, { message: '服务器未返回文件地址' });
                                }
                            } else {
                                // 上传失败
                                callback(false, { message: response.msg || response.message || '上传失败' });
                            }
                        },
                        error: function (xhr, status, error) {
                            var errorMsg = '网络错误';

                            if (xhr.responseJSON && xhr.responseJSON.msg) {
                                errorMsg = xhr.responseJSON.msg;
                            } else if (xhr.responseText) {
                                try {
                                    var response = JSON.parse(xhr.responseText);
                                    errorMsg = response.msg || response.message || errorMsg;
                                } catch (e) {
                                    errorMsg = '服务器响应格式错误';
                                }
                            }

                            callback(false, { message: errorMsg });
                        }
                    });
                }

                // 开始尝试初始化
                setTimeout(tryInitUpload, 100);
            }

            // 添加模式的图片组显示/隐藏
            function showImageGroup(index) {
                var $group = $('.slider-image-group[data-index="' + index + '"]');
                $group.show();

                // 初始化上传组件
                initUploadForGroup($group);

                // 绑定抓取按钮事件
                $group.find('.collect-btn').off('click').on('click', Controller.handleCollect);
            }

            // 初始化拖拽排序功能
            initDragSort();

            // 添加图片按钮事件
            $('#add-image-group').click(function () {
                if (mode === 'add') {
                    // 添加模式：动态创建新的图片组（和编辑模式一样）
                    if (imageCount < maxImages) {
                        var $newGroup = addImageGroup();
                        if ($newGroup) {
                            // addImageGroup函数内部已经处理了计数器更新和上传组件初始化
                        }
                    }
                } else {
                    // 编辑模式：动态创建新的图片组
                    var $newGroup = addImageGroup();
                    // addImageGroup函数内部已经处理了上传组件的初始化
                }
            });

            // 删除图片组事件
            $(document).on('click', '.remove-image-group', function () {
                var $group = $(this).closest('.slider-image-group');
                var index = $group.data('index');

                if (imageCount > 1) {
                    if (mode === 'add') {
                        // 添加模式：隐藏并清空表单数据
                        $group.hide();
                        $group.find('input[type="text"]').val('');
                        $group.find('.plupload-preview').empty();

                        // 重新计算显示的图片数量
                        imageCount = $('.slider-image-group:visible').length;
                    } else {
                        // 编辑模式：直接移除元素
                        $group.remove();
                        imageCount--;
                    }
                    updateImageCount();
                } else {
                    layer.msg('至少需要保留一个图片组', { icon: 2 });
                }
            });

            // 编辑模式：加载现有数据
            function loadExistingImages() {
                // 直接从隐藏字段读取 row[image] 数据
                var imageData = $("input[name='row[image]']").val();
                
                console.log('Loading existing images, raw data:', imageData);

                // 添加更严格的数据验证
                if (imageData && 
                    typeof imageData === 'string' && 
                    imageData.trim() !== '' && 
                    imageData !== 'undefined' && 
                    imageData !== 'null') {
                    try {
                        // 解析JSON格式的图片数据
                        var images = JSON.parse(imageData);
                        console.log('Parsed images data:', images);

                        if (images && typeof images === 'object') {
                            // 检查是否有图片数据
                            var hasImages = false;
                            
                            // 遍历图片数据并创建图片组
                            $.each(images, function (key, item) {
                                if (item && typeof item === 'object') {
                                    console.log('Adding image group for key:', key, 'item:', item);
                                    addImageGroup(item);
                                    hasImages = true;
                                }
                            });
                            
                            // 如果没有找到任何图片数据，添加一个空的图片组
                            if (!hasImages) {
                                console.log('No valid image data found, adding empty group');
                                addImageGroup();
                            }
                        } else {
                            // 数据格式不正确，添加一个空的图片组
                            console.log('Invalid data format, adding empty group');
                            addImageGroup();
                        }
                    } catch (e) {
                        // 解析失败，添加一个空的图片组
                        console.log('JSON parse error:', e.message, 'adding empty group');
                        addImageGroup();
                    }
                } else {
                    // 没有现有数据，添加一个空的图片组
                    console.log('No existing data, adding empty group');
                    addImageGroup();
                }
                
                console.log('Final image count:', imageCount);
            }

            // 添加模式：修复上传组件的data-input-id属性并绑定抓取按钮
            function fixUploadInputIds() {
                $('.plupload').each(function () {
                    var inputId = $(this).data('input-id');
                    if (inputId) {
                        var $input = $(this).closest('.form-group').find('input[type="text"]');
                        if ($input.length) {
                            $input.attr('id', inputId);
                        }
                    }
                });
                // 绑定抓取按钮事件
                $('.collect-btn').off('click').on('click', Controller.handleCollect);

                // 初始化所有现有的上传组件
                $('.slider-image-group:visible').each(function () {
                    initUploadForGroup($(this));
                });
            }

            // 检查Fast是否加载
            function checkFastLoaded() {
                if (typeof Fast === 'undefined') {
                    return false;
                }
                if (!Fast.api || !Fast.api.upload) {
                    return false;
                }
                return true;
            }

            // 初始化
            if (mode === 'add') {
                imageCount = 0; // 从0开始，因为还没有创建任何图片组
                updateImageCount();
                // 立即执行，不等待Fast加载
                fixUploadInputIds();
                // 添加模式下，默认创建一个空的图片组
                addImageGroup();
            } else if (mode === 'edit') {
                // 编辑模式：加载现有图片数据
                loadExistingImages();
            }

            // 添加全局Ctrl+V快捷键监听
            Controller.initGlobalPasteListener();
        },
        
        // 初始化抓取网址功能
        initCollectContent: function() {
            // 绑定抓取按钮事件
            $(document).on('click', '.collect-btn', Controller.handleCollect);
        },
        
        // 处理抓取请求
        handleCollect: function () {
            var $btn = $(this);
            var groupIndex = $btn.data('group-index');

            // 获取当前组的链接输入框
            var $hrefInput = $btn.closest('.slider-image-group').find('input[name*="[href]"]');
            var s_url = $hrefInput.val().trim();

            // 如果输入框为空，尝试从剪贴板获取链接
            if (!s_url) {
                Controller.tryGetClipboardUrl(function (clipboardUrl) {
                    if (clipboardUrl) {
                        // 填入链接并执行抓取
                        $hrefInput.val(clipboardUrl);
                        Controller.performCollect($btn, clipboardUrl);
                    } else {
                        // 剪贴板中没有有效链接，提示用户输入
                        layer.msg('请先在图片链接框中输入要抓取的网址', { icon: 2 });
                        $hrefInput.focus();
                    }
                });
                return;
            }

            // 如果输入框有内容，直接抓取
            Controller.performCollect($btn, s_url);
        },
        
        // 尝试从剪贴板获取URL
        tryGetClipboardUrl: function (callback) {
            if (navigator.clipboard && navigator.clipboard.readText) {
                // 现代浏览器的剪贴板API
                navigator.clipboard.readText().then(function (text) {
                    var trimmedText = text.trim();
                    if (trimmedText && Controller.isValidUrl(trimmedText) && trimmedText.toLowerCase().startsWith('http')) {
                        callback(trimmedText);
                    } else {
                        callback(null);
                    }
                }).catch(function (err) {
                    // 如果剪贴板访问失败，返回null
                    callback(null);
                });
            } else {
                // 不支持剪贴板API的浏览器
                callback(null);
            }
        },
        
        // 执行抓取操作
        performCollect: function ($btn, s_url) {
            // 验证URL格式
            if (!Controller.isValidUrl(s_url)) {
                layer.msg('请输入正确的网址格式', { icon: 2 });
                return;
            }

            // 显示加载状态
            var originalText = $btn.html();
            $btn.html('<i class="fa fa-spinner fa-spin"></i> 抓取中...').prop('disabled', true);

            // 使用JSONP方式发送请求
            Controller.jsonpRequest({
                url: 'https://collect.longsunhd.com/collect/index.php',
                data: {
                    s_url: encodeURIComponent(s_url),
                    gather_type: 1
                },
                success: function (data) {
                    if (data) {
                        var $group = $btn.closest('.slider-image-group');

                        // 填入标题（过滤空格）
                        if (data.subject) {
                            var cleanTitle = data.subject.replace(/\s+/g, ' ').trim();
                            $group.find('input[name*="[title]"').val(cleanTitle);
                        }

                        // 填入图片地址
                        if (data.thumb) {
                            // 处理thumb字段，如果是数组取第一个元素
                            var thumbValue = Array.isArray(data.thumb) ? data.thumb[0] : data.thumb;
                            $group.find('input[name*="[src]"').val(thumbValue);
                        }

                        layer.msg('抓取成功！', { icon: 1 });
                    } else {
                        layer.msg('抓取失败，返回数据格式错误', { icon: 2 });
                    }
                },
                error: function (error) {
                    layer.msg('抓取失败：' + error, { icon: 2 });
                },
                complete: function () {
                    // 恢复按钮状态
                    $btn.html(originalText).prop('disabled', false);
                }
            });
        },
        
        // JSONP请求函数
        jsonpRequest: function (options) {
            var callbackName = 'jsonp_callback_' + Math.round(100000 * Math.random());
            var script = document.createElement('script');
            var params = [];

            // 添加callback参数
            options.data.callback = callbackName;

            // 构建参数字符串
            for (var key in options.data) {
                if (options.data.hasOwnProperty(key)) {
                    params.push(encodeURIComponent(key) + '=' + encodeURIComponent(options.data[key]));
                }
            }

            // 设置全局回调函数
            window[callbackName] = function (data) {
                try {
                    if (options.success) {
                        options.success(data);
                    }
                } catch (e) {
                    if (options.error) {
                        options.error(e.message);
                    }
                } finally {
                    // 清理
                    document.head.removeChild(script);
                    delete window[callbackName];
                    if (options.complete) {
                        options.complete();
                    }
                }
            };

            // 设置超时处理
            var timeout = setTimeout(function () {
                if (window[callbackName]) {
                    if (options.error) {
                        options.error('请求超时');
                    }
                    document.head.removeChild(script);
                    delete window[callbackName];
                    if (options.complete) {
                        options.complete();
                    }
                }
            }, 30000); // 30秒超时

            // 设置script标签
            script.src = options.url + '?' + params.join('&');
            script.onerror = function () {
                clearTimeout(timeout);
                if (window[callbackName]) {
                    if (options.error) {
                        options.error('网络错误');
                    }
                    document.head.removeChild(script);
                    delete window[callbackName];
                    if (options.complete) {
                        options.complete();
                    }
                }
            };

            // 添加到页面
            document.head.appendChild(script);
        },
        
        // URL格式验证函数
        isValidUrl: function (string) {
            try {
                new URL(string);
                return true;
            } catch (_) {
                return false;
            }
        },
        
        // 初始化全局粘贴监听器
        initGlobalPasteListener: function () {
            // 防止重复绑定
            $(document).off('keydown.sliderImgsPaste');

            $(document).on('keydown.sliderImgsPaste', function (e) {
                // 检测Ctrl+V组合键
                if (e.ctrlKey && e.keyCode === 86) {
                    // 检查是否在输入框中
                    var $target = $(e.target);
                    if ($target.is('input[type="text"], textarea')) {
                        // 如果在输入框中，不拦截，让正常粘贴生效
                        return;
                    }

                    // 防止默认粘贴行为
                    e.preventDefault();

                    // 执行自定义粘贴逻辑
                    Controller.handleGlobalPaste();
                }
            });
        },
        
        // 处理全局粘贴事件
        handleGlobalPaste: function () {
            // 查找第一个空的图片组
            var $emptyGroup = Controller.findFirstEmptyGroup();

            if (!$emptyGroup) {
                layer.msg('所有图片组都已有内容，请手动清空一个组或添加新组', { icon: 2 });
                return;
            }

            // 从剪贴板获取内容
            Controller.tryGetClipboardUrl(function (clipboardUrl) {
                if (clipboardUrl) {
                    // 填入链接并执行抓取
                    var $hrefInput = $emptyGroup.find('input[name*="[href]"]');
                    var $collectBtn = $emptyGroup.find('.collect-btn');

                    $hrefInput.val(clipboardUrl);

                    // 执行抓取
                    Controller.performCollect($collectBtn, clipboardUrl);

                    // 显示提示
                    layer.msg('已自动填入链接并开始抓取', { icon: 1, time: 2000 });
                } else {
                    layer.msg('剪贴板中没有有效的链接', { icon: 2 });
                }
            });
        },
        
        // 查找第一个空的图片组
        findFirstEmptyGroup: function () {
            var $emptyGroup = null;

            $('.slider-image-group:visible').each(function () {
                var $group = $(this);
                var $hrefInput = $group.find('input[name*="[href]"]');
                var $titleInput = $group.find('input[name*="[title]"]');
                var $srcInput = $group.find('input[name*="[src]"]');

                // 检查是否为空组（所有输入框都为空）
                if (!$hrefInput.val().trim() && !$titleInput.val().trim() && !$srcInput.val().trim()) {
                    $emptyGroup = $group;
                    return false; // 跳出循环
                }
            });

            return $emptyGroup;
        },
        
        api: {
            bindevent: function () {
                // 自定义表单提交处理，添加成功后的回调
                Form.api.bindevent($("form[role=form]"), function(data, ret) {
                    // 表单提交成功后的回调
                    if (ret.code === 1) {
                        // 关闭弹窗
                        var index = parent.Layer.getFrameIndex(window.name);
                        parent.Layer.close(index);
                        
                        // 刷新父页面的表格
                        if (parent.$("#table").length > 0) {
                            parent.$("#table").bootstrapTable('refresh');
                        }
                        
                        // 显示成功消息
                        parent.Layer.msg(ret.msg || '操作成功', {icon: 1});
                    }
                });
                
                // 表单提交前处理图片数据
                $('form[role=form]').on('submit', function(e) {
                    // 收集所有图片组数据
                    var images = [];
                    $('.slider-image-group:visible').each(function() {
                        var $group = $(this);
                        var title = $group.find('input[name*="[title]"').val();
                        var href = $group.find('input[name*="[href]"').val();
                        var src = $group.find('input[name*="[src]"').val();
                        
                        if (src) { // 只保存有图片的组
                            images.push({
                                title: title,
                                href: href,
                                src: src
                            });
                        }
                    });
                    
                    // 将图片数据转换为JSON并填入隐藏字段
                    $('#c-image').val(JSON.stringify(images));
                });
            },
            
            formatter: {
                status: function (value, row, index) {
                    var checked = value == '1' ? 'checked' : '';
                    var html = '<a class="btn-change text-success" data-url="communityinfo/communityinfo/changeStatus" data-confirm="确认切换状态？" data-id="' + row.id + '"><i class="fa ' + (row.status === 0 ? 'fa-toggle-on fa-flip-horizontal text-gray' : 'fa-toggle-on') + ' fa-2x"></i></a>';

                    return html;
                },
                
                image: function (value, row, index) {
                    if (!value) return '';
                    
                    // 检查value是否是字符串
                    if (typeof value === 'string') {
                        return '<a href="' + value + '" target="_blank" class="thumbnail" style="margin: 0; display: inline-block;"><img src="' + value + '" class="img-sm img-center" style="width: 60px; height: 60px; object-fit: cover;"></a>';
                    }
                    
                    // 如果是数组格式，保持原有逻辑
                    var html = '<div class="image-container" style="display: flex; flex-wrap: wrap; gap: 5px;">';
                    for (var i = 0; i < value.length; i++) {
                        html += '<a href="' + value[i]['src'] + '" target="_blank" class="thumbnail" style="margin: 0; display: inline-block;"><img src="' + value[i]['src'] + '" class="img-sm img-center" style="width: 60px; height: 60px; object-fit: cover;"></a>';
                    }
                    html += '</div>';
                    return html;
                }
            },
            
            events: {
                status: {
                    'change .js-switch-status': function (e) {
                        e.stopPropagation();
                        var that = this;
                        var id = $(this).data('id');
                        var status = $(this).prop('checked') ? 1 : 2;

                        Fast.api.ajax({
                            url: 'communityinfo/communityinfo/changestatus',
                            data: { id: id, status: status }
                        }, function (data, ret) {
                            Layer.msg(ret.msg);
                            // 刷新当前行
                            $("#table").bootstrapTable('updateRow', {
                                index: $(that).closest('tr').data('index'),
                                row: { status: status }
                            });
                        }, function (data, ret) {
                            Layer.msg(ret.msg);
                            // 恢复开关状态
                            $(that).prop('checked', !$(this).prop('checked'));
                        });
                        return false;
                    }
                }
            }
        }
    };

    // 拖拽排序功能
    function initDragSort() {
        var $container = $('#slider-images-container');
        var draggedElement = null;
        var placeholder = null;

        // 为每个图片卡片添加拖拽事件
        function bindDragEvents() {
            $container.find('.modern-image-card').each(function() {
                var $card = $(this);
                var $dragHandle = $card.find('.card-drag-handle');
                
                // 绑定拖拽手柄的鼠标按下事件
                $dragHandle.off('mousedown').on('mousedown', function(e) {
                    e.preventDefault();
                    startDrag($card, e);
                });
            });
        }

        // 开始拖拽
        function startDrag($element, e) {
            draggedElement = $element[0];
            
            // 创建占位符
            placeholder = document.createElement('div');
            placeholder.className = 'drag-placeholder';
            placeholder.style.height = $element.outerHeight() + 'px';
            placeholder.style.margin = '10px 0';
            placeholder.style.border = '2px dashed #007bff';
            placeholder.style.borderRadius = '8px';
            placeholder.style.backgroundColor = 'rgba(0, 123, 255, 0.1)';
            
            // 添加拖拽样式
            $element.addClass('dragging');
            
            // 绑定鼠标移动和释放事件
            $(document).on('mousemove.drag', handleDrag);
            $(document).on('mouseup.drag', endDrag);
        }

        // 处理拖拽移动
        function handleDrag(e) {
            if (!draggedElement) return;
            
            var $draggedElement = $(draggedElement);
            var mouseY = e.clientY;
            var $cards = $container.find('.modern-image-card').not('.dragging');
            var insertBefore = null;
            
            // 找到应该插入的位置
            $cards.each(function() {
                var $card = $(this);
                var cardTop = $card.offset().top;
                var cardHeight = $card.outerHeight();
                var cardMiddle = cardTop + cardHeight / 2;
                
                if (mouseY < cardMiddle) {
                    insertBefore = this;
                    return false; // 跳出循环
                }
            });
            
            // 移除之前的占位符
            $(placeholder).remove();
            
            // 插入占位符
            if (insertBefore) {
                $(insertBefore).before(placeholder);
            } else {
                $container.append(placeholder);
            }
        }

        // 结束拖拽
        function endDrag(e) {
            if (!draggedElement) return;
            
            var $draggedElement = $(draggedElement);
            
            // 移除拖拽样式
            $draggedElement.removeClass('dragging');
            
            // 如果有占位符，将元素移动到占位符位置
            if (placeholder && placeholder.parentNode) {
                $(placeholder).before(draggedElement);
                $(placeholder).remove();
                
                // 重新索引所有图片组
                reindexImageGroups();
            }
            
            // 清理
            draggedElement = null;
            placeholder = null;
            
            // 解绑事件
            $(document).off('mousemove.drag mouseup.drag');
        }

        // 重新索引图片组
        function reindexImageGroups() {
            $container.find('.modern-image-card').each(function(newIndex) {
                var $card = $(this);
                var oldIndex = $card.data('index');
                
                if (oldIndex !== newIndex) {
                    // 更新data-index
                    $card.attr('data-index', newIndex).data('index', newIndex);
                    
                    // 更新卡片标题
                    $card.find('.card-subtitle').text(`图片 ${newIndex + 1}`);
                    
                    // 更新所有输入框的name属性
                    $card.find('input[name^="images["]').each(function() {
                        var $input = $(this);
                        var name = $input.attr('name');
                        var newName = name.replace(/images\[\d+\]/, `images[${newIndex}]`);
                        $input.attr('name', newName);
                    });
                    
                    // 更新ID属性
                    $card.find('[id*="images-"]').each(function() {
                        var $element = $(this);
                        var id = $element.attr('id');
                        var newId = id.replace(/images-\d+/, `images-${newIndex}`);
                        $element.attr('id', newId);
                    });
                    
                    // 更新data-input-id属性
                    $card.find('[data-input-id*="images-"]').each(function() {
                        var $element = $(this);
                        var dataInputId = $element.attr('data-input-id');
                        var newDataInputId = dataInputId.replace(/images-\d+/, `images-${newIndex}`);
                        $element.attr('data-input-id', newDataInputId);
                    });
                    
                    // 更新data-preview-id属性
                    $card.find('[data-preview-id*="p-images-"]').each(function() {
                        var $element = $(this);
                        var dataPreviewId = $element.attr('data-preview-id');
                        var newDataPreviewId = dataPreviewId.replace(/p-images-\d+/, `p-images-${newIndex}`);
                        $element.attr('data-preview-id', newDataPreviewId);
                    });
                    
                    // 更新预览列表ID
                    $card.find('[id*="p-images-"]').each(function() {
                        var $element = $(this);
                        var id = $element.attr('id');
                        var newId = id.replace(/p-images-\d+/, `p-images-${newIndex}`);
                        $element.attr('id', newId);
                    });
                    
                    // 更新状态指示器ID
                    $card.find('[id*="status-"]').each(function() {
                        var $element = $(this);
                        var id = $element.attr('id');
                        var newId = id.replace(/status-\d+/, `status-${newIndex}`);
                        $element.attr('id', newId);
                    });
                    
                    // 更新预览容器ID
                    $card.find('[id*="preview-container-"]').each(function() {
                        var $element = $(this);
                        var id = $element.attr('id');
                        var newId = id.replace(/preview-container-\d+/, `preview-container-${newIndex}`);
                        $element.attr('id', newId);
                    });
                    
                    // 更新data-group-index属性
                    $card.find('[data-group-index]').each(function() {
                        $(this).attr('data-group-index', newIndex);
                    });
                }
            });
        }

        // 初始绑定
        bindDragEvents();
        
        // 当添加新卡片时重新绑定事件
        $(document).on('card-added', function() {
            bindDragEvents();
        });
    }

    return Controller;
});